<template>
  <!--item in itmes
      item：值，当前循环的数组值
      itmes：循环的数组 -->
  <h6>v-for 渲染数组， v-for="item in itmes"</h6>
  <ul>
    <li v-for="sub in subject">编号：{{ sub.id }} --- 名称：{{ sub.name }}</li>
  </ul>

  <hr />
  <h6>v-for 渲染数组， v-for="{ 解构…… } in itmes"</h6>
  <!-- 解构对象 -->
  <ul>
    <li v-for="{ id, name } in subject">编号：{{ id }} --- 名称：{{ name }}</li>
  </ul>

  <hr />
  <!-- (value, index) in itmes
      value：值
      index：索引
      itmes：循环的数组 -->
  <h6>v-for 渲染数组， v-for="(value, index) in itmes"</h6>
  <ul>
    <li v-for="(sub, index) in subject">
      编号：{{ sub.id }} --- 名称：{{ sub.name }} --- 索引：{{ index }}
    </li>
  </ul>

  <hr />
  <h6>v-for 渲染数组， v-for="({ 解构…… }, index) in itmes"</h6>
  <!-- 解构对象 -->
  <ul>
    <li v-for="({ id, name }, index) in subject">
      编号：{{ id }} --- 名称：{{ name }} --- 索引：{{ index }}
    </li>
  </ul>

  <!--value in object
        value：属性值
        object：循环的对象-->
  <h6>v-for 渲染对象， v-for="value in object"</h6>
  <ul>
    <li v-for="value in student">
      {{ value }}
    </li>
  </ul>

  <hr />

  <!--(value, name) in object
      value：属性值
      name：属性名
      object：循环的对象-->
  <h6>v-for 渲染对象， v-for="(value, name) in object"</h6>
  <ul>
    <li v-for="(value, name) in student">属性名：{{ name }} --- 属性值： {{ value }}</li>
  </ul>

  <hr />

  <!--(value, name, index) in object
      value：属性值
      name：属性名
      index: 索引
      object：循环的对象-->
  <h6>v-for 渲染对象， v-for="(value, name, index) in object"</h6>
  <ul>
    <li v-for="(value, name, index) in student">
      属性名：{{ name }} --- 属性值： {{ value }} --- 索引：{{ index }}
    </li>
  </ul>
</template>

<script setup>
import { reactive, ref } from 'vue'

let subject = ref([
  // 课程
  { id: 1, name: 'Vue' },
  { id: 2, name: 'Java' },
  { id: 3, name: 'UI设计' },
  { id: 4, name: 'Hadoop' },
  { id: 5, name: '影视后期' },
])

let student = reactive({
  styNum: '007', // 学号
  name: 'Jack', // 名字
  age: 18, //年龄
})
</script>

<script>
export default {
  data: () => ({
    subject: [
      // 课程
      { id: 1, name: 'Vue' },
      { id: 2, name: 'Java' },
      { id: 3, name: 'UI设计' },
      { id: 4, name: 'Hadoop' },
      { id: 5, name: '影视后期' },
    ],
    student: {
      styNum: '007', // 学号
      name: 'Jack', // 名字
      age: 18, // 年龄
    },
  }),
}
</script>
